<template>
  <div class="top">
    <div class="nav" :class="color">
        <h2>聊天</h2>
        <h2>互动</h2>
        <img :src="this.URL+'notice.png'">
    </div>
    <div class="secNav">
      <h3 @click="hid1" :style="{color:bjColor1,fontWeight:fontwe1}">全部</h3>
      <h3 @click="hid2" :style="{color:bjColor2,fontWeight:fontwe2}">招呼</h3>
      <h3 @click="hid3" :style="{color:bjColor3,fontWeight:fontwe3}">沟通中</h3>
    </div>
    <div class="list">
      <ul>
        <li v-for="item,index in list" :key="index" v-show="b">
          <div id="img" :style="'background: url('+src+') '+item.imgs+';background-size: 200%;'">
          </div>
          <div class="content">
            <div class="content1">
              <h3>{{item.title}}</h3>
              <p>{{item.time}}</p>
            </div>
            <p>{{item.content}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import Set from "./components/Set.vue"
export default {
  name:"message",
  data(){
    return{
      color:'',
      b:true,
      bjColor1:"",
      bjColor2:"",
      bjColor3:"",
      fontwe1:"",
      fontwe2:"",
      fontwe3:"",
      // mt:"",
    //   style:'background: url(../../public/消息/head.png)',
    src:this.URL+'message/message.png',
      list:[
        {
          imgs:'0 0',
          title:'直播堂',
          time:'10:47',
          content:'公开课学Java,高薪稳定抢手...'
        },
        {
          imgs:'0 100px',
          title:'直播招聘',
          time:'昨天',
          content:'春招必看:信息科技行业就业指南！'
        },
        {
          imgs:'0 50px',
          title:'通知',
          time:'昨天',
          content:'小心！找暑假简直，黑中介害人不浅！'
        },
        {
          imgs:'50px 0',
          title:'卓越丰 发布了新职位',
          time:'2月25日',
          content:'78位Boss新发布'
        },
        {
          imgs:'50px',
          title:'每日新发现',
          time:'2月17日',
          content:'面试真题:JS中执行上下文的类型...'
        }
        ]
    }
  },
  methods:{
    hid1(){
      this.b=true;
      this.bjColor1="#000";
      this.fontwe1="600"
      this.bjColor3="darkgray";
      this.fontwe3="500"
      this.bjColor2="darkgray";
      this.fontwe2="500"
    },
    hid2(){
      this.b=false;
      this.bjColor2="#000";
      this.fontwe2="600"
      this.bjColor1="darkgray";
      this.fontwe1="500"
      this.bjColor3="darkgray";
      this.fontwe3="500"
      // this.mt=0
    },
    hid3(){
      this.b=false;
      this.bjColor3="#000";
      this.fontwe3="600"
      this.bjColor2="darkgray";
      this.fontwe2="500"
      this.bjColor1="darkgray";
      this.fontwe1="500"
      // this.mt=0
    }
  },
  mounted(){
    this.color =this.$store.getters.color 
  },
}
</script>

<style lang="scss" scoped>
    .nav{
        width: 100vw;
        height: 18vw;
        line-height: 18vw;
        display: flex; 
        // background: #37c2bb;
        h2{
            margin-left: 10px;
            // margin-top: 5px;
            // line-height: 1;
        }
        h2:nth-child(1){
          color: white;
          padding-left: 15px;
        }
        h2:nth-child(2){
          margin-left: 20px;
          color: rgba(236, 238, 240,.5);
          font-weight: 500;
        }
        img{
            width: 30px;
            height: 30px;
            margin-left: 180px;
            margin-top: 15px;
        }
    }
    .secNav{
      display: flex;
      height: 60px;
      border-bottom: 1px solid rgb(247, 246, 246);
      // background: white;
      h3{
        padding-left: 15px;
        margin: 10px;
        margin-top: 20px;
        color: darkgray;
        font-weight: 500;
      }
      h3:nth-child(1){
        color: #000;
        font-weight: 600;
      }
    }
    .list{
        // height: 100vh;
        ul{
          background: white;
          padding-left: 25px;
          margin-top: 20px;
          li{
            padding-bottom: 20px;
            display: flex;
            justify-content: space-between;
            #img{
                width: 50px;
                height: 50px;
            }
            .content{
                padding-left: 10px;
                box-sizing: border-box;
                flex: 1;
                p{
                    font-size: 12px;
                    color: #ccc;
                }
                .content1{
                    display: flex;
                    h3{
                        width: 150px;
                        font-size: 14px;
                        margin-top: 5px;
                        margin-right: 75px;
                    }
                    p{
                        font-size: 12px;
                        color: #ccc;
                        margin-top: 20px;
                        // margin-left: 160px;
                    }
                }
            }
        }
        }
    }
</style>